<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
[#include "/admin/include/head.htm"]
<script type="text/javascript" src="${base}/resource/js/jquery.drag.js" ></script>
[#include "/admin/include/upload.ftl"]
<style>
.container {
	width: ${(deliveryTemplate.width)!1000}px;
	height: ${(deliveryTemplate.height)!500}px;
	position: relative;
	overflow: hidden;
	border: 1px solid #dde9f5;
	background: url(${(deliveryTemplate.background)!}) no-repeat;
	background-position: ${(deliveryTemplate.offsetX)!0}px ${(deliveryTemplate.offsetY)!0}px;
}

.container .item {
	line-height: 20px;
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	color: #666666;
	overflow: hidden;
	word-wrap: break-word;
	filter: alpha(opacity = 80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	border: 1px dotted #999999;
	background: #ffffff;
}
</style>
<script type="text/javascript">
	var sItem;
            
    $(document).ready(function(){
		var mainform = $("#mainform");  
		//表单底部按钮 
    	LG.setFormDefaultBtn(f_cancel, function(){
			var content = $("#container").html();
			if(content.trim() == ''){
				alert("模板内容不允许为空!");
				return;
			}
			$("#info").val(content);
			f_save(mainform, "b2c_delivery_template");
		});
		
		var browserOption = {
			"createThumb": 1,//创建缩略图
			"callback": function(url){
				$("#background").val(url);
				$("#container").css({"background":"url(" + url +") no-repeat"});
			}
		};
		$(".browserButton").browser(browserOption);
		
		var children = $("#container")[0].children;
		for(var i = 0;i < children.length;i++){
			var left = children[i].style.left;
			var top = children[i].style.top;
			var child = $(children[i]);
			child.dragDrop({
				fixarea: [0, $('#container').width() - children[i].width, 0, $('#container').height() - children[i].height],
				position:{left:left,top:top}
			});
		}
		$("#background").change(function(){
			$("#container").css({"background":"url(" + $(this).val() +") no-repeat"});
		});
		
		$("#height").change(function(){
			var h = $(this).val();
			if(!isNaN(h)){
				$("#container").css('height', h+"px");
			}
		});
		
		$("#width").change(function(){
			var w = $(this).val();
			if(!isNaN(w)){
				$("#container").css('width', w+"px");
			}
		});
		
		$("#offsetX").change(function(){
			var x = $(this).val();
			var y = $("#offsetY").val();
			if(!isNaN(x) && !isNaN(y)){
				$("#container").css('background-position', x+'px '+y+"px");
			}
		});
		
		$("#offsetY").change(function(){
			var x = $("#offsetX").val();
			var y = $(this).val();
			if(!isNaN(x) && !isNaN(y)){
				$("#container").css('background-position', x+'px '+y+"px");
			}
		});

		$("#container .item").mouseover(function(){
            if($(this).find(".tagTip").length == 0){
                $("<span class='tagTip' style='color:red;font-weight:600'>"+$(this).find('pre').attr('title')+"</span>").appendTo($(this));
            }
        }).mouseleave(function(){
            $(this).find(".tagTip").remove();
        });;
    });
	
	function addTag(){
		var value = $("#tag").val();
		var text =  $("#tag").find('option:selected').text().trim();
		if (value != "") {
			var item = $('<div class="item" onclick="sItem = this;"><pre class="red" title="' + text + '">' + value + '<\/pre><div class="resize"><\/div><\/div>').appendTo($("#container"));
			item.dragDrop({
				fixarea: [0, $('#container').width() - item.width, 0, $('#container').height() - item.height]
			});
			sItem = item;
		}
	}


	
	function deleteTag(){
		if(sItem && sItem.parentNode){
			sItem.parentNode.removeChild(sItem);
			sItem = undefined;
		}
	}
</script>
</head>
[#if !deliveryTemplate??]
	[#assign isAdd = true /]
[#else]
	[#assign isEdit = true /] 
[/#if]
<body style="padding:10px;">
	<div id="tabcontainer" style="margin:0; padding:0 0 20px 0">
		<form id="mainform" name="mainform" class="validate" action="[#if isAdd??]save.jhtml[#else]update.jhtml[/#if]" method="post" class="validate">
			<input type="hidden" name="id" value="${(deliveryTemplate.id)!}"/>
			<input type="hidden" id="info" name="content"/>
			<table class="table">
				<tr>
					<th>名称：</th>
					<td>
						<input type="text" name="name" value="${(deliveryTemplate.name)!''}" 
							class="formText {required: true, remote: '${base}/admin/b2c/deliveryTemplate/checkName.jhtml?oldName=${(deliveryTemplate.name)!}', messages: {remote: '快递单模板名称已存在!'}}" />
					</td>
				</tr>
				<tr>
					<th>配送方式：</th>
					<td>
						[@u.select headerKey="" headerValue="请选择..." listKey="id" listValue="name"
							headerButtom="false" list=deliveryMethodList value="${(deliveryTemplate.deliveryMethod.id)!}"
							name="deliveryMethod.id" class="{required: true}"/]
					</td>
				</tr>
				<tr>
					<th>背景图：</th>
					<td>
						<input type="text" id="background" value="${(deliveryTemplate.background)!}" name="background" class="formText" />
						<input type="button" value="选择背景图片" class="button browserButton" />
					</td>
				</tr>
				<tr>
					<th align="center">操作：</th>
					<td>
						<select id="tag" onchange="addTag()">
							<option value="">请选择...</option>
							[#list paramList as n]
								<option value="${(n.config.key)!}">${n.name}</option>
							[/#list]
						</select>
						<input type="button" value="删除标签" onclick="deleteTag()"/>
					</td>
				</tr>
				<tr>
					<th>内容：</th>
					<td>
						<div id="container" class="container">${(deliveryTemplate.content)!''}</div>
					</td>
				</tr>
				<tr>
					<th>宽度：</th>
					<td>
						<input type="text" id="width" name="width"  value="${(deliveryTemplate.width)!'1000'}" class="formText {required: true,maxlength :10, number: true}"/>
					</td>
				</tr>
				<tr>
					<th>高度：</th>
					<td>
						<input type="text" id="height" name="height" value="${(deliveryTemplate.height)!'500'}" class="formText {required: true,maxlength :10, number: true}"/>
					</td>
				</tr>
				<tr>
					<th>偏移量X：</th>
					<td>
						<input id="offsetX" type="text" name="offsetX" value="${(deliveryTemplate.offsetX)!0}" class="formText {required: true,maxlength :10, number: true}" />
					</td>
				</tr>
				<tr>
					<th>偏移量Y：</th>
					<td>
						<input id="offsetY" type="text" name="offsetY" value="${(deliveryTemplate.offsetY)!0}" class="formText {required: true,maxlength :10, number: true}"/>
					</td>
				</tr>
				<tr>
					<td>是否默认:</td>
					<td>
						<input type="checkbox" name="isDefault" value="true" [#if deliveryTemplate??&&deliveryTemplate.isDefault]checked="true"[/#if]/>
					</td>
				</tr>
				<tr>
					<th>排序：</th>
					<td>
						<input type="text" name="priority" value="${(deliveryTemplate.priority)!0}" class="formText {required: true}"/>
					</td>
				</tr>
				<tr>
					<th>备注：</th>
					<td>
						<textarea type="text" name="description" cols="50" rows="3" class="formText {maxlength :250}">${(deliveryTemplate.description)!}</textarea>
					</td>
				</tr>
				<tr>
					<td>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>